 <!DOCTYPE html>
<html>
	<head>
	<meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		
		<title>人气漫画</title>
		<style type="text/css">
			ul,li{
				list-style: none;
				color: gainsboro;
			}
			html,body{
				width: 100%;
				height: 100%;
				padding: 0px;
				margin: 0px;
				background-color: black;
				overflow:scroll;
			}
			img{
				max-width: 99vw;
				margin: 0px auto;
			}
			.biaoti{
				color: white; 
				font-size: 10vw;
			}
			.num{
				font-size: 7vw;
				border: none;
				color:white;
			}
			.num2{
				font-size:6vw ;
				width: 20vw;
				text-align: center;
				border-radius:2vw ;
				outline: none;
				border: none;
				
			}
			.np-btn{
				display: flex;
				justify-content: space-around;
				align-items: center;
				color: white;
			}
			button{
				
				height: 10vw;
				width: 20vw;
				font-size:2vw ;
				border-radius:10px ;
				border: none;
				outline: none;
				background-color: white;
				color: black;
			}
			button:hover{
				background-color: grey;
			}
			img{
				display: block;
				margin: 5px auto;
			}
			/*.girl:hover,.doupo:hover{
				color: darkorange;
				
			}*/
			
			.bookActive{
				color: darkorange;
			
			}
			.toTop,.toBottom{
				
				font-size:4vw ;
				padding: 1vw;
				width: 20vw;
				height:15vw;
				border-radius: 3vw;
				text-align: center;
				background-color:dimgrey;
				color: white;
				border: none;
				outline: none;

			}
			.toTop{
				position: fixed;
				right: 5vw;
				bottom: 20vh;
				opacity: .7;
				
			}
			.toBottom{
			
				top: 5vw;

				
			}
			.tell{
				font-size: 2vw;
			}
		</style>
	</head>
	<body>

		<a href="#comeTop"><input type="button" class="toTop" value="换书" /></a>
		<a href="" name="comeTop" id="comeTop"></a>
		<!--<iframe id="doupo" src="http://www.kanman.com/25933/584.html" width="800px" height="800px"></iframe>-->
		<div class="biaoti">
			 <ul >
				 <li class="imgList bookActive" title="girlZhang">纯情丫头火辣辣</li>
				 <li class="imgList" title="douluoZhang">斗罗大陆</li>
				 <li class="imgList" title="jushiZhang">绝世唐门</li>
				 <!--<li class="imgList" title="binghuoZhang">冰火魔厨</li>-->
				 <li class="imgList" title="shenyinZhang">神印王座</li>
			</ul> 
			<a href="#bodyBottom" name="IMGLIST" id="IMGLIST"> <input type="button" class="toBottom" value="到底部"/></a>
			
			
		</div>-->
		<a href="" name="ss" id="ss"></a>
		<p class="num">第  1 话 </p>
				
		<div class="body">
		
		</div>
		<div class=" np-btn" >
			<button	 class="pre" onclick="choses(-1)"/> 上一话</button>
			<input class="num2"  onchange="choses(Number(this.value))"  type="number" name="" id="" value="1" /> 
			<a href="#ss"> <button	 class="next" onclick="choses(0)"/>下一话</button></a>
			
		</div>
		<a href="" name="bodyBottom" id="bodybottom"></a>
		<h2  class="tell" style="color:grey">
			本站不做盈利使用,仅限个人学习欣赏,请遵守相关法律<br />
			本站资源转自<a href="http://www.kanman.com">看漫画</a>      <a href="http://www.kanman.com">http://www.kanman.com</a><br />
			 如您喜欢,请购买正版图书,体验更好的服务<br />
			 若侵犯了您的权益,请联系QQ:604400726
		</h2>

	</body>
	<script type="text/javascript">
//	 狗屎一样的代码  狗屎一样的代码 狗屎一样的代码 
//   ie 不支持  ie 不支持  华为浏览器也不支持 
//   不想写对象 不想写对象 不想写对象
//  等我心情好我再封装 真是 
		
		var Imgbody = document.getElementsByClassName("body")[0];
		var pre = document.getElementsByClassName("pre")[0];
		var next = document.getElementsByClassName("next")[0];
		var num = document.getElementsByClassName("num")[0];
		var num2 = document.getElementsByClassName("num2")[0];
		var girl = document.getElementsByClassName("girl");
		var item = document.getElementsByClassName("imgList");
	
		var toTop = document.getElementsByClassName("toTop")[0];
		var toBottom= document.getElementsByClassName("toBottom")[0];
		var biaoti= document.getElementsByClassName("biaoti")[0];
		var zhang =Number(localStorage.girlZhang)||Number(1);
			num.innerText="第  " +zhang+"  话 ";
			num2.value= zhang;
		var ye = 0;
		

		var local='';
		toTop.onclick=function(){ 

			if(biaoti.style["display"]=="none"){
			
				
				biaoti.style["display"]="block"
			}else{
//				biaoti.style["display"]="none"
			};
			
		};
		var obj={
			'girlZhang':function (img , local){
				localStorage[local] = Number(zhang);
				zhang>=290
				?img.src="http://mhpic.manhualang.com/comic/C%2F%E7%BA%AF%E6%83%85%E4%B8%AB%E5%A4%B4%E7%81%AB%E8%BE%A3%E8%BE%A3%2F"+zhang+"%E8%AF%9DGQ%2F"+ye+".jpg-kmw.middle"
				:img.src="http://mhpic.manhualang.com/comic/C%2F%E7%BA%AF%E6%83%85%E4%B8%AB%E5%A4%B4%E7%81%AB%E8%BE%A3%E8%BE%A3%2F"+zhang+"%E8%AF%9D%2F"+ye+".jpg-kmw.middle"
			},
			'douluoZhang':function (img,local){
				localStorage[local] = Number(zhang);
				img.src="http://mhpic.manhualang.com/comic/D%2F%E6%96%97%E7%BD%97%E5%A4%A7%E9%99%86%E6%8B%86%E5%88%86%E7%89%88%2F"+zhang+"%E8%AF%9D%2F"+ye+".jpg-kmw.middle"
			},
			'jushiZhang':function (img,local){
				localStorage[local] = Number(zhang);
				zhang<85
				?img.src="http://mhpic.mh51.com/comic/J%2F%E7%BB%9D%E4%B8%96%E5%94%90%E9%97%A8%2F"+zhang+"%E8%AF%9D%2F"+ye+".jpg-kmw.middle"
				:zhang>110
					?img.src="http://mhpic.mh51.com/comic/J%2F%E7%BB%9D%E4%B8%96%E5%94%90%E9%97%A8%2F"+zhang+"%E8%AF%9DGQ%2F"+ye+".jpg-kmw.middle"
					:img.src="http://mhpic.mh51.com/comic/J%2F%E7%BB%9D%E4%B8%96%E5%94%90%E9%97%A8%2F"+zhang+"%E8%AF%9DSM%2F"+ye+".jpg-kmw.middle"
			},
			'binghuoZhang':function (img,local){
				localStorage[local] = Number(zhang);
				
				img.src="http://mhpic.manhualang.com/comic/D%2F%E6%96%97%E7%BD%97%E5%A4%A7%E9%99%86%E6%8B%86%E5%88%86%E7%89%88%2F"+zhang+"%E8%AF%9D%2F"+ye+".jpg-kmw.middle"

			},
			'shenyinZhang':function (img,local){
				localStorage[local] = Number(zhang);
				zhang<345
				?img.src="http://mhpic.mh51.com/comic/S%2F%E7%A5%9E%E5%8D%B0%E7%8E%8B%E5%BA%A7%E6%8B%86%E5%88%86%E7%89%88%2F%E7%AC%AC"+zhang+"%E8%AF%9D%2F"+ye+".jpg-kmw.middle"
				:img.src="http://mhpic.mh51.com/comic/S%2F%E7%A5%9E%E5%8D%B0%E7%8E%8B%E5%BA%A7%E6%8B%86%E5%88%86%E7%89%88%2F%E7%AC%AC"+zhang+"%E8%AF%9D%2F"+(1+ye)+".jpg-kmw.middle"
			}
			
		};
		var func= obj['girlZhang'];
		
		biaoti.onclick=function(ev){
			var ev=ev||window.event;
			if(ev.target.nodeName=="LI"){
				func=obj[ev.target.title];
				local=ev.target.title;
				
				for (let i=0 ;i<item.length;i++) {
					if(item[i].className.split(' ').length>1){item[i].className="imgList"};
				};
				var list = ev.target.className.split(' ');
				list.push("bookActive");
				ev.target.className = list.join(' ');
				
//				localStorage.doupoZhang = Number(zhang);
				zhang = Number(localStorage[ev.target.title])||Number(1);
				choses(zhang);
			}
			
		};
	
		function showImg () {

			var img=document.createElement("img");
				ye++;
			
				func(img,local);
				img.onload = showImg;
				img.onerror = ()=>{img.style.display="none"};
				Imgbody.appendChild(img);
		}
		function choses (x){
			if(x==0||x==-1){
				x==0?x=1:x=x;
				zhang+=x
			}else{
				zhang=x||zhang;
			};
			ye=0;
			Imgbody.innerHTML = "";
			if(biaoti.style["display"]!="none"){biaoti.style["display"]="none"};
			showImg();
			num.innerText="第  " +zhang+"  话 ";
			num2.value= zhang;
			Imgbody.firstChild.onerror = ()=>{
				Imgbody.firstChild.style['display']="none";
				num.innerHTML="第"+zhang+"话/章 暂无数据";
			}
		}
        showImg();
        
	

		
		
	</script>
	
	<script type="text/javascript">
		function pySort(str){
			// 返回汉字首字母
			//@ parmas:变量en:英文从小到大
			//@ parmas:变量zh:中文从小到大
			//@ parmas:形参str:传入的中文
			//@ parmas:返回值segs:返回的str中文的首字母
			if(str<'啊'||str>'帀') {console.error("pySort(str) : %c(str) 请传入中文汉字 ;当前为:"+typeof str+":"+str,"color:green");return ;};
  			if(!String.prototype.localeCompare)return null;
		 	var en="abcdefghjklmnopqrstwxyz".split('');
		  	var zh="啊八嚓哒妸发旮哈叽咔垃吗拏噢妑七呥仨它穵夕丫帀".split('');
		  	var segs;
		  		zh.forEach(function(value,index,self){
//		  			console.log(str.localeCompare(value,'zh'));
		  			//@ : ↑ "zh"实参表示是中文排序,返回值为 -1:前面str小于value; 0: str==value; 1: str大于value
		  			//@ : ↓ if判定条件是 : str大于或等于当前数组zh中index下标处的值并且小于zh中index+1下标处的值
		  			// 		 判定传入的汉字大小是位于 zh[index]和zh[index+1]之间的 
					//		 如:ba< bu <ca;则 bu 首字母为b;八<不<嚓;返回八的下标,而zh的各个下标与英文zh下标对应
					//      以此得到 不 的首字母 b
		  			if(str.localeCompare(value,'zh')>=0&&str.localeCompare(zh[index+1],'zh')==-1){
		  				
		  				segs=en[index];
		  				
		  					  				
		  				
		  			};
		  		});
				return segs;
		 };
 
 		var hanzi="bu";
 
// 		console.log(pySort(hanzi))

</script>

<script type="text/javascript">
	
    alert(navigator.webkitGetUserMedia)
</script>
</html>
